<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ride</title>
</head>

<body class="page-course dpflex">
    <!-- 数据信息 -->
    <div class="data-info">
        <h5 class="title">目前累计骑行距离：</h5>
        <div><span class="num" id="runNum">999.99</span>公里</div>
    </div>
    <!-- 地图容器 -->
    <div class="map flex1" id="mapContent"></div>
    <!-- 倒计时 -->
    <div class="gobtn" id="goBtn">GO</div>
    <!-- 倒计时蒙层 -->
    <div class="maskcountdownn " id="maskCountdown">
        <!-- 倒计时文字 -->
        <div class="numcountdown" id="numCountdown">3</div>
    </div>

    <!-- 数据面板蒙层 -->
    <div class="sport-panel" id="sportPanel">
        <h3>运动中</h3>
        <!-- 跑步距离 -->
        <div class="rundata"><span id="runDistanceNum">99.99</span>公里</div>
        <!-- 地图图标 -->
        <div class="map-icon">
            <span>GPS信号度低, 数据精准度低</span>
            <span class="ml12 mr16">-------------</span>
            <i class="iconfont iconditu" id="iconBtn"></i>
        </div>
        <!-- 仪表盘 -->
        <div class="dashboard mt20">
            <div class="flex1">
                <i class="iconfont iconsudu"></i>
                <p class="mt16 mb16">配速</p>
                <p id="paceNum">--</p>
            </div>
            <div class="flex1">
                <i class="iconfont iconshijiyongshi"></i>
                <p class="mt16 mb16">用时</p>
                <p id="runTime">00:00:00</p>
            </div>
            <div class="flex1">
                <i class="iconfont iconqialuli"></i>
                <p class="mt16 mb16">千卡</p>
                <p id="calorieNum">--</p>
            </div>
        </div>
        <!-- 暂停 -->
        <div id="iconStop" class="icon-stop-container btn-group">
            <div class="btn-group dpflex fdcolumn jscenter">
                <i class="iconfont iconzanting"></i>
                <span>暂停</span>
            </div>
        </div>

        <!-- 继续 & 结束 -->
        <div id="btns" class="btns">
            <div class="dpflex jsaround">
                <div id="iconContinue" class="icon-continue-container btn-group dpflex fdcolumn jscenter">
                    <i class="iconfont iconicon_play"></i>
                    <span>继续</span>
                </div>

                <div id="iconOver" class="icon-over-container btn-group dpflex fdcolumn jscenter">
                    <i class="iconfont iconjieshu"></i>
                    <span>结束</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据面板地图蒙层 -->
    <div id="mapState" class="map-state">
    </div>

    <!-- 地图模式 - 卡片 -->
    <div id="mapCard" class="map-card">
        <h4>户外跑</h4>
        <p><span id="cardDistance"></span>公里</p>
        <p id="sportDate" class="date">xx-xx-xx</p>
        <div class="dpflex mt20 card-content pt16">
            <div class="flex1 dpflex fdcolumn">
                <span id="cardPace">--</span>
                <span>平均配速</span>
            </div>
            <div class="flex1 dpflex fdcolumn">
                <span id="cardTime">--</span>
                <span>用时</span>
            </div>
            <div class="flex1 dpflex fdcolumn">
                <span id="cardCalorie">--</span>
                <span>千卡</span>
            </div>
        </div>
    </div>

    <!-- 返回 -->
    <div id="backBtn" class="back-btn">
        <i class="iconfont iconleftarrow"></i>
    </div>

    <!-- 完成 -->
    <div id="completeBtn" class="complete-btn">完成</div>

    <!-- 秘钥：jq06DAYjGNZrIDeveMfLBfSYCreKkM1T -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jq06DAYjGNZrIDeveMfLBfSYCreKkM1T">
    </script>
</body>

</html>